<template>
  <div v-loading="loading" class="gl_contentBox gl_heightFull" style="padding: 0">
    <div class="train_amount gl_mb_20">
      <div class="train_logo">
        <img :src="getStaticPhotoUrl(trainningRegisterInfo.imagePath)" alt="" @error="errorPhoto">
      </div>
      <div class="train_message gl_fs_16 gl_ft_weight">
        <p class="gl_mb_10">
          <span>订单号：{{ orderNo }}</span>
        </p>
        <p class="gl_mb_10">
          <span class="gl_pr_20">{{ trainningRegisterInfo.name }}</span>
          <span>{{ trainningRegisterInfo.genderName }}</span>
        </p>
        <p class="gl_fs_12">证件号：{{ trainningRegisterInfo.idCardNumber }}</p>
      </div>
    </div>
    <div class="gl_px_15">
      <el-tabs v-model="activeTab" class="gl_tabs" type="card">
        <el-tab-pane label="会员信息" name="first">
          <Member :register-info="registerInfo" :trainning-register-info="trainningRegisterInfo" :is-c-t-a-member-required="isCTAMemberRequired" :is-w-t-a-belt-required="isWTABeltRequired" :is-c-t-a-belt-required="isCTABeltRequired" />
        </el-tab-pane>
        <el-tab-pane label="费用信息" name="second">
          <Cost :detail="detail" />
        </el-tab-pane>
      </el-tabs>
    </div>
    <Approve ref="approve" />
    <el-row>
      <el-col align="center">
        <el-button class="gl_train_button train_button" :disabled="status" type="primary" @click="openApprove">审核</el-button>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import defaultPhoto from '@/assets/images/face_default.png';
import Member from './components/member.vue';
import Cost from './components/cost.vue';
import Approve from './components/approve.vue';
import {
  api_GET_EventsManagementRegisterId // 获取会员信息
} from '@/extend/api/gameswaggerApi/app';
import {
  api_GET_TrainTrainningRegisterBySourceRegister, // 根据培训Id和会员Id获取培训人员详情
  api_GET_TrainTrainningSettingByTrainningIdTrainningId // 获取培训设置
} from '@/extend/api/trainswaggerApi/app';
import {
  api_GET_TradeOrderDetails // 获取订单详情
} from '@/extend/api/swaggerApi/app.js';
export default {
  components: {
    Member,
    Cost,
    Approve
  },
  data() {
    return {
      defaultPhoto: defaultPhoto,
      loading: false,
      orderNo: '',
      registerInfo: {}, // 个人信息
      trainningRegisterInfo: {}, // 培训个人信息
      detail: {},
      status: false,
      isCTABeltRequired: true, // 是否显示中跆协级位段位
      isWTABeltRequired: true, // 是否显示国际台协段位
      isCTAMemberRequired: true, // 是否显示会员认证
      activeTab: 'first'
    };
  },
  created() {
    this.orderNo = this.$route.query.orderNo;
    this.status = this.$route.query.status;
    this.getTrainningRegisterInfo();
    this.getRegisterInfo();
    this.getDetail();
    this.getTrainningSetting();
  },
  methods: {
    getRegisterInfo() {
      var that = this;
      that.loading = true;
      const form = {
        IncludeRegisterType: true,
        IncludeGender: true,
        IncludeIdCardType: true
        // IncludeTags: true
        // IncludeDelegations: true,
        // IncludeDelegationEntries: true
      };
      api_GET_EventsManagementRegisterId(that.$route.query.registerId, form).then(res => {
        that.registerInfo = res || {};
        that.loading = false;
      }, (error) => {
        that.loading = false;
        that.$message({ type: 'error', message: '获取会员信息失败！' + (error.error && error.error.message || '') });
      });
    },
    getTrainningRegisterInfo() {
      var that = this;
      that.loading = true;
      const form = {
        trainningId: that.$route.params.id,
        registerId: that.$route.query.registerId
      };
      api_GET_TrainTrainningRegisterBySourceRegister(form).then(res => {
        that.trainningRegisterInfo = res || {};
        that.loading = false;
      }, (error) => {
        that.loading = false;
        that.$message({ type: 'error', message: '获取会员信息失败！' + (error.error && error.error.message || '') });
      });
    },
    // 获取订单详情
    getDetail() {
      var that = this;
      that.loading = true;
      const form = {
        OrderNo: this.orderNo
      };
      api_GET_TradeOrderDetails(form).then(res => {
        if (res.details) {
          that.detail = JSON.parse(res.details);
          console.log(that.detail, 'detail');
        }
        that.loading = false;
      }).catch(() => {
        that.loading = false;
        that.$message({ type: 'error', message: '获取费用信息失败！' + (error.error && error.error.message || '') });
      });
    },
    getTrainningSetting() {
      var that = this;
      api_GET_TrainTrainningSettingByTrainningIdTrainningId(that.$route.params.id).then(res => {
        if (res) {
          this.isCTABeltRequired = res.isCTABeltRequired;
          this.isWTABeltRequired = res.isWTABeltRequired;
          this.isCTAMemberRequired = res.isCTAMemberRequired;
        }
      });
    },
    // 点击审核
    openApprove() {
      const id = this.$route.query.id;
      this.$refs.approve.open(id);
    },
    // 获取图片地址
    getStaticPhotoUrl(relativeUrl) {
      if (!relativeUrl) return '';
      return WEB_CONFIG.VUE_APP_STATIC_FILE_RUL + relativeUrl;
    },
    // 默认头像
    errorPhoto() {
      const img = event.srcElement;
      img.src = this.defaultPhoto;
    }
  }
};
</script>

<style scoped>
.train_amount {
  min-width: 800px;
  height: 130px;
  padding: 30px 32px 18px 32px;
  border-bottom: 1px solid #d9d9d9;
}
.train_logo {
  width: 82px;
  height: 82px;
  overflow: hidden;
  border-radius: 50%;
  display: inline-block;
  vertical-align: middle;
}
img {
  width: 100%;
  height: 100%;
}
.train_message {
  display: inline-block;
  vertical-align: middle;
  margin-left: 34px;
}
.train_message .gl_fs_12 {
  color: #595959;
  font-weight: normal;
}
.train_button {
  width: 92px;
  border-radius: 8px;
  margin-top: 26px;
  margin-bottom: 46px;
}
</style>
